کاربرد خاصیت height و width در css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | خاصیت height در css</title>
<style type="text/css">
body{
   font-family:Tahoma, Geneva, sans-serif;
   font-size:12px;
   direction:rtl;
}
.block{
   height:100px;
   border:1px solid #999;
   background-color:#FC0;
   margin:4px;
}
.main{
   height:200px;
   border:1px solid #999;
   background-color:#CCC;
   margin:4px;
   padding:4px;
}
.layer{
   height:50%;
   border:1px solid #999;
   background-color:#6CF;
}
#my-css{
   height:20em;
   border:1px solid #999;
   background-color:#6C6;
   margin:4px;
}
</style>
</head>
<body>
<div class="block">
متن در کلاس block - مقدار دهی پیکسلی
</div>
<div class="main">
<div class="layer">
متن در کلاس layer - مقدار دهی درصدی
</div>
بلاک والد در کلاس main - مقدار دهی پیکسلی
</div>
<div id="my-css">
متن در آی دی my-css - مقداردهی با em
</div>
<hr />
در استایل نویسی کاربردی معمولا از مقدار دهی پیکسلی و برخی مواقع از مقدار دهی درصدی یا em استفاده می شود (به طور مثال برای طراحی قالب های سازگار با گوشی های تلفن همراه)؛ سایر موارد در امورات عادی کاربرد زیادی ندارند.
</body>
</html>

توضیح:
- کلاس ها و آی دی تعریف شده در کد بالا، فرضی و با عناوین انتخابی است.
- در استفاده از مقداردهی درصدی نیاز به وجود یک بلاک والد یا دربرگیرنده داریم، به این معنی که تنها عناصر زیر مجموعه (بلاک درونی) می توانند مقادیر درصدی داشته باشد که در واقع درصد از میزان ارتفاع بلاک اصلی حساب می شود، به طور مثال اگر بلاک اصلی 200 پیکسل ارتفاع داشته باشد، بلاکی که درون آن قرار گرفته با ارتفاع 25 درصد، معادل 50 پیکسل (25 درصد از 200 پیکسل) در حالت معمولی ارتفاع خواهد داشت.
در css برای مقدار دهی چند شیوه وجود دارد:
- تعیین مقادیر به پیکسل (picture element)، به فرض 6px، 2px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 1pt، 3pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

خاصیت width در css

در کنار خاصیت height که ارتفاع عناصر را مشخص می کند، خاصیت width برای تنظیم عرض عناصر در صفحات وب تعریف شده است، بدین ترتیب با کمک css قابلیت تعیین ارتفاع و عرض برای تگ های html به راحتی فراهم می شود، این خاصیت نیز مانند height از مقادیر پیکسلی، درصدی و... تبعیت می کند که در مثال زیر با چند نمونه از آن آشنا می شویم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | خاصیت width در css</title>
<style type="text/css">
body{
   font-family:Tahoma, Geneva, sans-serif;
   font-size:12px;
   direction:rtl;
}
.block{
   width:500px;
   height:100px;
   border:1px solid #999;
   background-color:#FC0;
   margin:4px;
}
.main{
   width:800px;
   height:200px;
   border:1px solid #999;
   background-color:#CCC;
   margin:4px;
   padding:4px;
}
.layer{
   width:50%;
   height:50%;
   border:1px solid #999;
   background-color:#6CF;
}
#my-css{
   width:50em;
   height:20em;
   border:1px solid #999;
   background-color:#6C6;
   margin:4px;
}
</style>
</head>
<body>
<div class="block">
متن در کلاس block - مقدار دهی پیکسلی
</div>
<div class="main">
<div class="layer">
متن در کلاس layer - مقدار دهی درصدی
</div>
بلاک والد در کلاس main - مقدار دهی پیکسلی
</div>
<div id="my-css">
متن در آی دی my-css - مقداردهی با em
</div>
<hr />
علاوه بر بلاک های div، خاصیت های عرض و ارتفاع در css بر روی سایر تگ ها مانند جداول، پاراگراف ها، تصاویر و... نیز می توانند تاثیر گذار باشند.
</body>
</html>
توضیح:
- قواعد تعریف خاصیت width دقیقا مشابه با خاصیت height است.
- دقت کنید که در یک کلاس یا آی دی، می توان به فرض برای width آن از یک نوع مقدار دهی و برای height از نوعی دیگر استفاده کرد، به فرض برای عرض از مقدار دهی پیکسلی و برای ارتفاع از مقدار دهی درصدی استفاده کرد و از این لحاظ محدودیتی وجود ندارد.

خاصیت min-height و max-height

در کنار دو خاصیت اصلی height و width، از چند خاصیت زیر مجموعه نیز در این رابطه می توانیم استفاده کنیم، از جمله min-height و max-height، اما اول باید بدانیم که این دو ویژگی چه کاربردی دارند؟
به طور خلاصه min-height حداقل ارتفاع یک عنصر را مشخص می کند، به فرض در حالت پیش فرض مرورگرها هر بلاک را به اندازه محتوایی که در آن وجود دارد، ارتفاع می دهند، اما با تنظیم مقادیر min-height مرورگر حداقل مقادیر ارتفاع را (چه محتوا به اندازه کافی باشد و چه نباشد) برای آن بلاک در نظر می گیرد، اما max-height حداکثر ارتفاع یک عنصر را مشخص می کند، یعنی به فرض اگر میزان محتوا از ارتفاع یک بلاک بیشتر باشد، مرورگر ارتفاع را همچنان ثابت نگه می دارد و ممکن است محتوا در خارج از بلاک نشان داده شود یا اینکه آن بلاک اسکرول گردد، البته این ویژگی معمولا در کنار خاصیت overflow استفاده می شود، overflow رفتار مرورگر در حالتی که محتوا از میزان ارتفاع یک بلاک بیشتر است را تعیین می کند که خود چند مقدار می پذیرد:
- auto، اگر محتوا بیشتر باشد، بلاک اسکرول می شود.
- hidden، محتوای اضافه مخفی می شود.
- scroll، نوار اسکرول ظاهر می شود.
- visible، بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود.
مثال:

#my-id{
max-height:50px;
overflow:scroll;
}

یا

#my-id{
min-height:200px;
height:auto;
}

خاصیت max-width و min-width

کارکرد خاصیت max-width و min-width در قریب به اتفاق موارد مشابه min-height و max-height است که در بالا اشاره شد، با این تفاوت که در اینجا خاصیت بر روی عرض عناصر html تاثیر می گذارد و از این گذشته مقادیر overflow برای width کاربردی ندارد.
مثال: